<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>重设密码</title>
    <link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/css/normalize.css'"/>
    <link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/css/loginCss.css'"/>
    <style type="text/css">
        html,body{ background:none }
    </style>

</head>
<body>
<div class="login-top login-top-green">
    <p>
        <span>安亭养老</span>
        <em>欢迎登陆</em>
    </p>
</div>
<div class="login-box">
    <div class="login-status-con">
        <ul class="login-status-one">
            <li>
                <p class="current">身份验证</p>
                <p class="current">1</p>
            </li>
            <li>
                <p class="current">找回密码</p>
                <p class="current">2</p>
            </li>
            <li>
                <p>完成</p>
                <p>3</p>
            </li>
        </ul>
        <nav class="login-status-two login-status-pass textCenter mt30px">
            <ul class="inline-block">
                <li>
                    <label>新密码：</label>
                    <p class="relative">
                        <span><input id="newPsw" type="password" maxlength=20 placeholder="请输入新密码"></span>
                        <em data-state="0" onclick="changeSee(this)"><img th:src="@{/static/img/icon_no.png}"></em>
                        <h6 class="red" id="newPswMsg" style="display: none"></h6>
                    </p>
                </li>
                <li>
                    <label>确认密码：</label>
                    <p class="relative">
                        <span><input id="repeatPsw" type="password" maxlength=20 placeholder="请再次输入新密码"></span>
                        <em data-state="0" onclick="changeSee(this)"><img th:src="@{/static/img/icon_no.png}"></em>
                    <h6 class="red" id="repeatPswMsg" style="display: none"></h6>
                    </p>
                </li>
                <li>
                    <label></label>
                    <p id="submitBtn" class="cursor bgGreen cursor" onclick="editPassword()">提&nbsp;交</p>
                </li>
            </ul>
        </nav>
    </div>
</div>
</body>
<script th:src="${#request.getContextPath()}+'/static/js/jquery-2.1.3.min.js'" charset="utf-8"></script>
<script th:inline="javascript">var basePath = [[${#httpServletRequest.getContextPath()}]];</script>
<script type="text/javascript" th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
<script>

    //layer初始化
    var layer;
    layui.use('layer', function(){
        layer = layui.layer;
    });

    /**
     * 切换密码可见
     */
    function changeSee(obj){
        var state = $(obj).data("state");
        if(state==0){
            $(obj).data("state",1);
            $(obj).parent().find("input").attr("type","text");
            $(obj).find("img").attr("src", basePath+"/static/img/icon_look.png");
        }else{
            $(obj).data("state",0);
            $(obj).parent().find("input").attr("type","password");
            $(obj).find("img").attr("src", basePath+"/static/img/icon_no.png");
        }
    }

    /**
     * 修改密码
     */
    function editPassword(){
        var phone =  '[[${phone}]]';
        var newPsw = $("#newPsw").val();
        var repeatPsw = $("#repeatPsw").val();

        if(isNull(phone)){
            layer.msg("请先进行身份验证！");
            return;
        }

        if(isNull(newPsw)){
            msg("newPsw", "新密码不能为空！");
            return;
        }

        if(newPsw.length<6){
            msg("newPsw", "新密码长度不能小于6位！");
            return;
        }
        var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,20}');
        if(!pwdRegex.test(newPsw)){
            msg("newPsw", "密码中必须包含字母、数字、特殊字符！");
            return;
        }
        clearMsg("newPsw");

        if(isNull(repeatPsw)){
            msg("repeatPsw", "重复密码不能为空！");
            return;
        }
        if(repeatPsw.length<6){
            msg("repeatPsw", "重复密码长度不能小于6位！");
            return;
        }
        if(newPsw!=repeatPsw){
            msg("repeatPsw", "两次输入密码不符！");
            return;
        }
        clearMsg("repeatPsw");

        $.ajax({
            url:basePath+"/changePassword",
            type:"post",
            dataType:"json",
            data:{"phone":phone, "newPassword":newPsw},
            beforeSend: function(){
                $("#submitBtn").css("pointer-events", "none");
            },
            success:function (data) {
                if(data.code == 200){
                    window.location.href=basePath+"/resetPswSuc";
                }else{
                    layer.msg(data.msg);
                }
                $("#submitBtn").css("pointer-events", "auto");
            }
        })


    }

    /**
     * 判断是否为空
     */
    function isNull(value) {
        return value == null || value === "" || value === undefined;
    }

    /**
     * 显示提示信息
     */
    function msg(id, text){
        $("#"+id).attr("style","border:1px solid #FF3B30;");
        $("#"+id+"Msg").html(text).show();
    }

    /**
     * 清除提示信息
     */
    function clearMsg(id){
        $("#"+id).attr("style","border:1px solid #ccc;");
        $("#"+id+"Msg").html('').hide();
    }
</script>
</html>
